<template>
	<view class="lawyer-container">
		<!-- 下拉刷新 -->
		<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="onReachBottom" refresher-enabled="true"
			:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
			<!-- 律师列表 -->
			<view class="lawyer-list">
				<view v-for="(lawyer, index) in lawyerInfoList" :key="lawyer.id || index" class="lawyer-card"
					@click="onClickLawyer(lawyer)">
					<!-- 律师头像和基本信息 -->
					<view class="lawyer-header">
						<image :src="baseURL + lawyer.avatarImg || '/static/logo.png'" class="lawyer-avatar"
							mode="aspectFill"></image>
						<view class="lawyer-basic-info">
							<view class="lawyer-name">{{ lawyer.name }}</view>
							<view class="lawyer-meta">
								<text class="meta-item">{{ lawyer.sexName }}</text>
								<text class="meta-divider">|</text>
								<text class="meta-item">执业{{ lawyer.practiceYears }}年</text>
							</view>
							<view class="lawyer-education">{{ lawyer.education }} · {{ lawyer.graduationSchool }}</view>
						</view>
					</view>

					<!-- 律师简介 -->
					<view class="lawyer-intro" v-if="lawyer.introduction">
						{{ lawyer.introduction }}
					</view>

					<!-- 执业证号和联系方式 -->
					<view class="lawyer-bottom-info">
						<view class="lawyer-license" v-if="lawyer.lawyerCode">
							<text class="license-label">执业证号：</text>
							<text class="license-code">{{ lawyer.lawyerCode }}</text>
						</view>
						<view class="lawyer-contact">
							<view class="contact-item" @click.stop="callPhone(lawyer.phone)">
								<uni-icons type="phone" color="#fff" size="22"></uni-icons>
								<text class="contact-text">{{ lawyer.phone }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多提示 -->
			<view class="load-more" v-if="lawyerInfoList.length > 0">
				<text v-if="loading">加载中...</text>
				<text v-else-if="hasMore">上拉加载更多</text>
				<text v-else>没有更多数据了</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!loading && lawyerInfoList.length === 0">
				<image src="/static/empty.png" class="empty-image" mode="aspectFill"></image>
				<text class="empty-text">暂无律师信息</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted
} from 'vue';
import {
	apiGetLawyerInfoList
} from '@/api/prtition/lawyerInfo';
import { baseURL } from '@/utils/request.js'

// 响应式数据
const queryParams = ref({
	pageNum: 1,
	pageSize: 10
});
const lawyerInfoList = ref([]);
const loading = ref(false);
const refreshing = ref(false);
const hasMore = ref(true);

/**
 * 获取律师信息列表
 * @param {boolean} isRefresh 是否为刷新操作
 */
const getLawyerInfoList = async (isRefresh = false) => {
	if (loading.value) return;

	loading.value = true;

	try {
		const res = await apiGetLawyerInfoList(queryParams.value);

		if (res.code === 200) {
			const { rows, total } = res;

			if (isRefresh) {
				// 刷新时替换数据
				lawyerInfoList.value = rows || [];
			} else {
				// 加载更多时追加数据
				lawyerInfoList.value.push(...(rows || []));
			}

			// 判断是否还有更多数据
			const currentTotal = lawyerInfoList.value.length;
			hasMore.value = currentTotal < total;
		} else {
			uni.showToast({
				title: res.msg || '获取数据失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('获取律师列表失败:', error);
		uni.showToast({
			title: '网络错误，请重试',
			icon: 'none'
		});
	} finally {
		loading.value = false;
		refreshing.value = false;
	}
};

/**
 * 下拉刷新
 */
const onRefresh = () => {
	refreshing.value = true;
	queryParams.value.pageNum = 1;
	hasMore.value = true;
	getLawyerInfoList(true);
};

/**
 * 触底加载更多
 */
const onReachBottom = () => {
	if (!hasMore.value || loading.value) return;

	queryParams.value.pageNum++;
	getLawyerInfoList(false);
};

/**
 * 点击律师卡片
 */
const onClickLawyer = (lawyer) => {
	console.log('点击律师11:', lawyer);
	// 这里可以跳转到律师详情页面
	uni.navigateTo({
		url: `/pages/lawyer/detail?lawyerId=${lawyer.id}`
	});
};

/**
 * 拨打电话
 */
const callPhone = (phone) => {
	if (!phone) return;

	uni.showModal({
		title: '拨打电话',
		content: `确定要拨打 ${phone} 吗？`,
		success: (res) => {
			if (res.confirm) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	});
};

// 页面加载时获取数据
onMounted(() => {
	getLawyerInfoList(true);
});
</script>

<style scoped>
.lawyer-container {
	height: 100vh;
	background-color: #f5f5f5;
}

.scroll-view {
	height: 100%;
}

.lawyer-list {
	padding: 20rpx;
}

.lawyer-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.lawyer-card:active {
	transform: scale(0.98);
	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.12);
}

.lawyer-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.lawyer-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 24rpx;
	border: 2rpx solid #f0f0f0;
}

.lawyer-basic-info {
	flex: 1;
	padding-top: 8rpx;
}

.lawyer-name {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	margin-bottom: 12rpx;
}

.lawyer-meta {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.meta-item {
	font-size: 28rpx;
	color: #666666;
}

.meta-divider {
	margin: 0 12rpx;
	color: #cccccc;
}

.lawyer-education {
	font-size: 26rpx;
	color: #999999;
	line-height: 1.4;
}

.lawyer-intro {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 16rpx;
	padding: 16rpx;
	background-color: #f8f9fa;
	border-radius: 8rpx;
	border-left: 4rpx solid #007aff;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	max-height: calc(25rpx * 1.5 * 3);
	overflow: hidden;
	text-overflow: ellipsis;
}

.lawyer-bottom-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.lawyer-license {
		font-size: 24rpx;
		color: #999999;
		flex: 1;
	}

	.license-label {
		color: #999999;
	}

	.license-code {
		color: #666666;
		font-family: monospace;
	}

	.lawyer-contact {
		display: flex;
		justify-content: flex-end;
	}

.contact-item {
	display: flex;
	align-items: center;
	padding: 12rpx 20rpx;
	background-color: #007aff;
	border-radius: 24rpx;
	transition: all 0.3s ease;
}

.contact-item:active {
	background-color: #0056cc;
	transform: scale(0.95);
}

.contact-icon {
	margin-right: 8rpx;
	font-size: 24rpx;
}

.contact-text {
	font-size: 26rpx;
	color: #ffffff;
	font-weight: 500;
}

.load-more {
	text-align: center;
	padding: 40rpx 20rpx;
	font-size: 28rpx;
	color: #999999;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 40rpx;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 32rpx;
	opacity: 0.6;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}
</style>